<template>
  <!-- :title="!id?'新增组织架构':(type=='add'?'新增下级':'编辑组织架构')" -->
  <el-dialog
    :title="
      !id
        ? $t('dept.dept4')
        : type == 'add'
        ? $t('dept.dept5')
        : $t('dept.dept6')
    "
    :visible.sync="dialogVisible"
    width="500px"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm"
    >
      <!-- 上级部门 -->
      <el-form-item :label="$t('dept.dept7')" prop="parent_id_list">
        <el-cascader
          v-model="ruleForm.parent_id_list"
          style="width: 100%"
          :options="options"
          :show-all-levels="false"
          :props="propsList"
          :disabled="disabled ? true : false"
        />
      </el-form-item>
      <!-- 部门名称 -->
      <el-form-item :label="$t('dept.dept1')" prop="department_name">
        <el-input
          v-model="ruleForm.department_name"
          maxlength="10"
          show-word-limit
        />
      </el-form-item>
      <!-- 部门描述 -->
      <el-form-item :label="$t('dept.dept8')" prop="description">
        <el-input
          v-model="ruleForm.description"
          type="textarea"
          maxlength="20"
          show-word-limit
        />
      </el-form-item>
    </el-form>
    <span
      slot="footer"
      class="dialog-footer"
      v-if="
        (checkPermission(['department@update']) && id) ||
        (checkPermission(['department@save']) && !id) ||
        (checkPermission(['department@save']) && type == 'add')
      "
    >
      <el-button @click="resetForm('ruleForm')">{{
        $t("common.common1")
      }}</el-button>
      <el-button type="primary" @click="submitForm('ruleForm')">{{
        $t("common.common2")
      }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getList, addList, editList, saveList } from "@/api/system/dept";
export default {
  data() {
    return {
      dialogVisible: false,
      disabled: false,
      id: "",
      options: [],
      ruleForm: {
        parent_id_list: [1],
        department_name: "",
        description: "",
      },
      propsList: {
        value: "id",
        label: "department_name",
        checkStrictly: true,
      },
      rules: {
        department_name: [
          {
            required: true,
            message: this.$t("common.common26") + this.$t("dept.dept1"),
            trigger: "blur",
          },
        ],
      },
      type: "",
    };
  },
  mounted() {},
  methods: {
    init(type, id, childrenId) {
      this.type = type;
      this.getList();
      this.id = id || "";
      this.dialogVisible = true;
      if (!id) {
        // 新增
        this.disabled = false;
      } else if (typeof id === "object") {
        // 添加下级
        this.disabled = true;
        var list = id.map(Number);
        this.ruleForm.parent_id_list = list.concat(
          childrenId !== 1 ? [childrenId] : []
        );
        console.log(this.ruleForm.parent_id_list);
      }
    },
    EditInit(id) {
      this.getList();
      this.disabled = true;
      this.dialogVisible = true;
      this.editList(id);
      this.id = id;
      this.type = "";
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var obj = Object.assign({}, this.ruleForm, {
            parent_id: this.ruleForm.parent_id_list.slice(-1).toString(),
          });
          if (this.type == "add") {
            this.addItem(obj);
          } else {
            this.saveList(obj);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.ruleForm.parent_id_list = [1];
      this.dialogVisible = false;
    },
    handleClose() {
      this.resetForm("ruleForm");
    },
    getList() {
      getList().then((res) => {
        this.options = res.data;
      });
    },
    // 新增
    addItem(obj) {
      addList(obj).then((res) => {
        if (res.code == 10000) {
          this.$parent.getList();
          this.resetForm("ruleForm");
        }
      });
    },
    // 详情
    editList(id) {
      editList(id).then((res) => {
        // var {} =res.
        this.ruleForm = {
          parent_id_list: res.data.parent_id_list.map(Number),
          department_name: res.data.department_name,
          description: res.data.description,
        };
      });
    },
    saveList(obj) {
      saveList(this.id, obj).then((res) => {
        if (res.code == 10000) {
          this.$parent.getList();
          this.resetForm("ruleForm");
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.title {
  font-size: 16px;
  line-height: 40px;
}
</style>
